<template>
  <div class="log web-box">
    <div class="seg-banner">
      <!-- 使用 v-model 绑定到 selectedSegment -->
      <el-segmented v-model="selectedSegment" :options="options" block style="width: 60%;" />
      <div>
<el-input v-model="searchKeyword" style="width: 240px" :prefix-icon="Search" placeholder="请输入" >
      <template #prefix>
        <el-icon name="search" />
      </template>
    </el-input>
    <el-button type="primary" style="margin-left:20px">
      <el-icon style="vertical-align: middle">
        <Search />
      </el-icon>
      <span style="vertical-align: middle"> 搜索 </span>
    </el-button>
      </div>
    </div>
    <div class="cont-table">
      <!-- 根据 selectedSegment 显示不同的表格数据 -->
      <el-table :data="filteredTableData" border stripe height="auto" class="custom-table" v-loading="loading">
        <el-table-column type="index" label="序号" width="120" align="center" />
        <!-- 查看模块 -->
        <!-- <el-table-column prop="fileName" label="文件名" v-if="selectedSegment === '查看'" width="auto" />
        <el-table-column prop="fileSize" label="文件大小" v-if="selectedSegment === '查看'" width="auto" />
        <el-table-column label="文件类型" v-if="selectedSegment === '查看'" width="auto">
          <template #default="{ row }">
            <span class="file-type-cell">
              <img :src="getFileIcon(row.fileType)" alt="" width="20" height="20"
                style="vertical-align: middle; margin-right: 8px;" />
              {{ row.fileType }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="handtype" label="操作类型" v-if="selectedSegment === '操作记录'" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getTagType('operationType', row.hand_text)">
              {{ row.hand_text }}
            </el-tag>
          </template>
        </el-table-column> -->
        <!-- 操作记录 -->
        <el-table-column prop="time" label="操作时间"  width="160" align="center" />
        <el-table-column prop="filename" label="文件名"  width="auto" align="center" />
        <el-table-column prop="user.staffname" label="操作人"  width="auto"
          align="center">
        </el-table-column>
        <el-table-column prop="handtype" label="操作类型"  width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getTagType('operationType', row.hand_text)">
              {{ row.hand_text }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 所有类别都有的操作列 -->
        <el-table-column fixed="right" label="操作" min-width="100" >
          <template #default>
            <el-button link type="primary" size="small">查看</el-button>
            <el-button link type="primary" size="small">授权</el-button>
            <el-button link type="primary" size="small">移动</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <!-- 分页 -->
     <div class="footer_pag">
      <el-pagination
  v-model:current-page="currentPage"
  v-model:page-size="pageSize"
  :page-sizes="pageSizes"
  layout="->,total, prev, pager, next,sizes"
  :total="total"
/>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import logApi from '@/api/httpApi';
import { date } from '@/utils/plugs';
import { useUserStore } from '@/api/store';

const userStore = useUserStore();

// ====== 状态管理 ======
const selectedSegment = ref('上传');
const options = ['上传', '下载', '查看', '删除', '操作记录'];
const searchKeyword = ref('');

// 表格数据集
const tableDataSets = ref({
  上传: [],
  下载: [],
  查看: [],
  删除: [],
  操作记录: [],
});

// 分页相关
const pageSize = ref(10);
const pageSizes = ref([10, 20, 30]);
const currentPage = ref(1);
const total = ref(0);

const showActionColumn=ref(false)
// 加载状态
const loading = ref(false);

// ====== 工具方法 ======
const getFileIcon = (type) => {
  const iconMap = {
    WORD: '/src/assets/images/fileIcon/WORD.png',
    TXT: '/src/assets/images/fileIcon/TXT.png',
    ZIP: '/src/assets/images/fileIcon/ZIP.png',
    VIDEO: '/src/assets/images/fileIcon/VIDEO.png',
    PDF: '/src/assets/images/fileIcon/PDF.png',
    PICTURE: '/src/assets/images/fileIcon/PICTURE.png',
    AUDIO: '/src/assets/images/fileIcon/AUDIO.png',
    RAR: '/src/assets/images/fileIcon/RAR.png',
    EXCEL: '/src/assets/images/fileIcon/EXCEL.png',
    DEFAULT: '/src/assets/images/fileIcon/TXT.png',
  };

  return iconMap[type] || iconMap.DEFAULT;
};

const getTagType = (field, value) => {
  const mapping = {
    announcementClassification: { '授权分类': 'success', '系统公告': 'info' },
    applicationStatus: { '通过': 'success', '拒绝': 'danger', '待审批': 'warning' },
    accountType: { '超级管理员': 'primary', '管理员': 'warning', '普通用户': 'default' },
    createByAcountType: { '超级管理员': 'primary', '管理员': 'warning' },
    operationType: { '删除': 'danger', '上传': 'primary' },
  };

  return mapping[field]?.[value] || 'default';
};

// ====== 数据处理 ======
const filteredTableData = computed(() => {
  return tableDataSets.value[selectedSegment.value] || [];
});

const getHandTypeBySegment = () => {
  const typeMap = {
    '上传': 'upload',
    '下载': 'download',
    '查看': 'check',
    '删除': 'delete',
  };
  return typeMap[selectedSegment.value] || '';
};

const getKeyByHandType = (handtype) => {
  switch (handtype) {
    case 'upload':
      return '上传';
    case 'download':
      return '下载';
    case 'check':
      return '查看';
    case 'delete':
      return '删除';
    default:
      return '操作记录';
  }
};

const buildRequestParams = () => {
  return {
    userid: userStore.userInfo.id,
    page: currentPage.value,
    limit: pageSize.value,
    handtype: getHandTypeBySegment(),
  };
};

// ====== 请求数据 ======
const fetchData = async () => {
  loading.value = true;
  try {
    const res = await logApi.getHandleList(buildRequestParams());
    if (res.status === 1 && Array.isArray(res.data?.handList)) {
      const formattedData = res.data.handList.map((item) => ({
        ...item,
        time: date(item.time, 'yyyy-MM-dd HH:mm:ss'),
      }));
      const key = getKeyByHandType(getHandTypeBySegment());
      tableDataSets.value[key] = formattedData;
      total.value = res.data.count;
    }
  } catch (err) {
    console.error('请求出错:', err);
  } finally {
    loading.value = false;
  }
};

// ====== 监听器 ======
watch(selectedSegment, () => {
  currentPage.value = 1;
  fetchData();
});

watch([currentPage, pageSize], () => {
  fetchData();
});

onMounted(async () => {
  await fetchData();
});
</script>
<style lang="less" scoped>
@import "@/assets/scss/web.scss";

.seg-banner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
</style>